<template>
  <div style="width: 100%;">
    <h2>业主信息列表</h2>
    <div class="search-bar">
      <el-input v-model="name" placeholder="姓名" style="width: 100px;"></el-input>
      <el-input v-model="account" placeholder="账号" style="width: 100px;"></el-input>
      <el-input v-model="sex" placeholder="性别" style="width: 100px;"></el-input>
      <el-input v-model="age" placeholder="年龄" style="width: 100px;"></el-input>
      <el-input v-model="phone" placeholder="电话" style="width: 100px;"></el-input>
      <el-input v-model="identification" placeholder="身份证号" style="width: 200px;"></el-input>
      <el-input v-model="email" placeholder="邮箱" style="width: 200px;"></el-input>
      <el-select v-model="userType" placeholder="用户类别" style="width: 100px;">
        <el-option label="业主" value="1"></el-option>
        <el-option label="物业" value="2"></el-option>
      </el-select>
      <el-select v-model="freeze" placeholder="冻结状态" style="width: 100px;">
        <el-option label="正常" value="0"></el-option>
        <el-option label="冻结" value="1"></el-option>
      </el-select>
      <el-button @click="fetchOwners" style="width: 80px;">查询</el-button>
    </div>
    <div v-if="isLoading">加载中···</div>
    <el-table v-else :data="ownerList" stripe style="width: 100%">
      <el-table-column prop="id" label="用户ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="account" label="账号"></el-table-column>
      <el-table-column prop="sex" label="性别"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="identification" label="身份证号"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="communityId" label="所在小区id"></el-table-column>
      <el-table-column prop="userType" label="用户类别">
        <template #default="scope">
          {{ scope.row.userType === 1? '业主' : '物业' }}
        </template>
      </el-table-column>
      <el-table-column prop="freeze" label="冻结状态">
        <template #default="scope">
          {{ scope.row.freeze === 0? '正常' : '冻结' }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="confirmFreezeUser(scope.row.id)" :disabled="scope.row.freeze === 1">
            {{ scope.row.freeze === 1? '已冻结' : '冻结' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    >
    </el-pagination>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";

const token = localStorage.getItem("token");
const headers = {
  Authorization: token
};
const isLoading = ref(false);
const ownerList = ref([]);

const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const name = ref('');
const account = ref('');
const identification = ref('');
const phone = ref('');
const email = ref('');
const communityId = ref('');
const sex = ref('');
const age = ref('');
const userType = ref('');
const freeze = ref('');

const getOwnerList = async () => {
  isLoading.value = true;
  const params = {
    current: currentPage.value,
    size: pageSize.value
  };
  if (name.value) params.name = name.value;
  if (account.value) params.account = account.value;
  if (identification.value) params.identification = identification.value;
  if (phone.value) params.phone = phone.value;
  if (email.value) params.email = email.value;
  if (sex.value) params.sex = sex.value;
  if (age.value) params.age = parseInt(age.value);
  if (userType.value) params.userType = parseInt(userType.value);
  if (freeze.value) params.freeze = parseInt(freeze.value);

  try {
    const response = await axios.get('/api/users/property/page', {
      headers,
      params
    });
    console.log('请求参数:', params); // 打印请求参数
    if (response.data.code === 200) {
      ownerList.value = response.data.data.records;
      total.value = response.data.data.total;
    } else {
      ElMessage.error('获取业主信息列表失败')
    }
  } catch (err) {
    ElMessage.error(`获取业主信息列表失败：${err.message}`)
  } finally {
    isLoading.value = false;
  }
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  getOwnerList();
};

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  getOwnerList();
};

const fetchOwners = () => {
  currentPage.value = 1;
  getOwnerList();
};

const confirmFreezeUser = async (id) => {
  try {
    const confirmResult = await ElMessageBox.confirm(
        '确定要冻结该用户吗？',
        '确认',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
    );
    if (confirmResult === 'confirm') {
      const response = await axios.put(`/api/users/freeze/${id}`, null, { headers });
      if (response.data.code === 200) {
        ElMessage.success('用户账户冻结成功');
        getOwnerList();
      } else {
        ElMessage.error('冻结失败');
      }
    }
  } catch (err) {
    // 这里捕获的是用户取消操作或其他异常情况
    if (err && err.name!== 'Cancel') {
      ElMessage.error(`冻结失败：${err.message}`);
    }
  }
};

onMounted(() => {
  getOwnerList();
});
</script>

<style scoped>
.search-bar {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  gap: 10px;
}
.el-pagination {
  margin-top: 20px;
}
</style>